<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
<title>登录</title>
<link rel="stylesheet" href="./../../layui/2.3.0/css/layui.css?t=1527693307626"  media="all">
<style>
.layout1_foot{
position:relative;
	text-align:center;
	color:#fff;
	width: 100%;
    height: 46px;
    background: #242527;
}
.layui-input-block{
margin-left:0px;
}
.layui-form-item .layui-input-inline{
width:100%;
}

@media screen and (min-width: 768px){
#content{
	margin-top:60px;
}

}
@media screen and (max-width: 450px){
#content{
	margin-top:0px;
	margin-bottom:20px;
}
.layui-form-item .layui-inline{
display:inline;margin-left:5px;
margin-bottom:5px;
}
.layui-col-xs7 .layui-col-xs4{
display:inline;
}
.layui-form-item .layui-input-inline {
    margin: 0 0 0 0;
    display:inline;
}
}
</style>
 </head>
 
<body>
<ul class="layui-nav">
   <li class="layui-nav-item"><a href=""><img th:attr="src=@{/images/logo.jpeg}" style="width:100px;height:40px;"></a></li>
</ul>
<div style="padding: 20px; background-color: #F2F2F2;">

<div  id="content" class="layui-row layui-col-space15" style="height:500px;">
  
    <div class="layui-col-md4 layui-col-sm8 layui-col-xs12 layui-col-md-offset4 layui-col-sm-offset2">
      <div class="layui-card">
        <div class="layui-card-header" style="height:68px;line-height:68px;margin-left:46px;">
        <span style="font-size:18px;">登录</span>
        <div style="float:right;">没有账号?<a th:href="${regUrl}" style="color:#2FA0ED;border-bottom:1px solid #2FA0ED">立即注册</a></div>
        </div>
        <div class="layui-card-body">
         <form class="layui-form layui-row" id="loginForm" action="./auth" method="post">
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12 layui-col-xs12">
		    <div class="layui-input-inline " >
		      <input type="text"  name="username" maxlength=50 lay-verify="title" autocomplete="off" placeholder="请输入用户名/手机号" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12">
		    <div class="layui-input-inline">
		      <input type="password" style="" maxlength=16 name="password" lay-verify="title" autocomplete="off" placeholder="请输入密码(6-16位数字及大小写字母)" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12 layui-col-xs12">
		   <div class="layui-inline layui-col-md6 layui-col-sm7  layui-col-xs6">
		      <div class="layui-input-inline ">
		          <input type="text" maxlength=4 name="authCode" lay-verify="required" placeholder="请输入图形验证码" autocomplete="off" class="layui-input"  onfocus="this.select();"  onmouseup="this.select();" >
		      </div>
		    </div>
		    <div class="layui-inline layui-col-md3  layui-col-sm2 layui-col-xs2">
		      <div class="layui-input-inline" >
		        <img src="./vcode" id="codeImg" class="layui-btn layui-btn-primary" style="height:38px;width:100px;"/>
		      </div>
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md6  layui-col-md-offset3">
		  <div class="layui-input-inline">
		   <button class="layui-btn  layui-btn-normal layui-btn-fluid" type="button"  id="loginBtn">立即登录</button>
		   </div>
		   </div>
		 </form>
        </div>
      </div>
    </div>
  </div>
</div>  
<div class="layout1_foot" style="line-height:45px;">
<p>四川锦云运输有限公司<label style="margin-left:10px;">粤ICP备14091972号</label></p>
</div>

<script src="./../../layui/2.3.0/layui.all.js" charset="utf-8"></script>
<script>

layui.config({
    base: './' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use([], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,layer = layui.layer;

    element.render();
    function keydown(e) {
    	var currKey=0,e=e||event; 
    	currKey=e.keyCode||e.which||e.charCode;//支持IE、FF 
    	if (currKey == 13) {
    		$("#loginBtn").click();
    	}
    	} 
    document.onkeydown = keydown;
    $("#codeImg").click(function(){
    	var e=this,src=e.src,index=src.lastIndexOf("?");
    	if(index>0)
    	src=src.substring(0,src.lastIndexOf("?"));
    	e.src=src+'?_='+new Date().getTime()
    });
    $("#loginBtn").click(function(){
		var data=$("#loginForm").serializeArray(),d={};
		$.each(data,function(i,n){
			d[n["name"]]=n["value"];
		});
		$.post($("#loginForm").attr("action"),d,function(rs){
			if(rs["success"]){
				window.location.href="./../index.html";
			}else{
				layer.msg(rs["msg"]);
				$("#codeImg").trigger('click');
			}
			
		});
	})
  });
</script>
</body>
</html>
